<template>
  <el-dialog
      :visible.sync="visible"
      width="42%"
      :before-close="onClose">
      <div slot="title" style="font-size: 14px;font-weight: 500;">
        加好友设置
      </div>
      <div class="mytips_error mytips_warning2 mb-20">
        <i class="el-icon-warning iconinfo"></i>
        <span class="pl-6"> 此处修改会覆盖所选企微号下的加好友设置，请谨慎操作。</span>
      </div>
      <el-form class="form-wrap" ref="form" label-position="left" :model="form" label-width="140px">
        <el-form-item label="验证消息：" style="width: 100%;">
          <el-input type="textarea" :rows="6" maxlength="50" show-word-limit/>
        </el-form-item>
        <el-form-item label="发送申请时间间隔：" style="width: 100%;">
          <div class="appy-time-rows">
            <div class="row-item">
              <el-input size="small" v-model="value" style="width: 80px;"/>
              <span>秒</span>
            </div>
            <span class="liner">-</span>
            <div class="row-item">
              <el-input size="small" v-model="value" style="width: 80px;"/>
              <span>秒</span>
            </div>
            <el-button size="small" @click="setDefaultValue()" style="margin-left: 8px;">设为推荐值</el-button>
          </div>
        </el-form-item>
        <el-form-item label="每日发送申请上限：" style="width: 100%;">
          <div class="appy-time-rows">
            <div class="row-item">
              <el-input size="small" v-model="value" style="width: 80px;"/>
              <span>次</span>
            </div>
            <el-button size="small" @click="setDefaultValue()" style="margin-left: 8px;">设为推荐值</el-button>
          </div>
        </el-form-item>
        <el-form-item label="休眠时间段：" style="width: 100%;">
          <el-switch class="small" v-model="isCheck" />
          <div class="condition-block" v-show="isCheck">
            <div class="flex-rows">
              <el-time-select size="small" placeholder="选择时间" style="width: 118px;"/>
              <span style="color: rgb(136, 137, 153);margin: 0 4px;">~</span>
              <el-time-select size="small" placeholder="选择时间" style="width: 118px;"/>
            </div>
            <div>每日22:00至次日08:00生效</div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onClose">保存</el-button>
      </span>
    </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      options: [{
          value: 1,
          label: '第一组'
        }, {
          value: 2,
          label: '第二组'
        }],
        value: '',
        isCheck: false,
    }
  },
  props: ['visible'],
  methods: {
    onClose() {
      this.$emit('handCloseDialog');
    }
  },
}
</script>
<style lang="scss" scoped>
.form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .appy-time-rows {
    display: flex;
    align-items: center;
    .row-item {
      span {
        margin-left: 8px;
      }
    }
    .liner {
      margin: 0 4px;
    }
  }
  .condition-block {
    margin-top: 12px;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    .flex-rows {
      display: flex;
      align-items: center;
    }
  }
}
</style>